<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="新增商家券推广"
      :ghost="false"
      @back="() => $router.go(-1)"
    ></a-page-header>

    <page-header-wrapper>
      <a-card :bordered="false">
        <a-form-model
          ref="alipayForm"
          :model="alipayForm"
          :rules="alipayRules"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 11 }"
        >
          <a-form-model-item label="小程序" prop="mini_id">
            <a-select placeholder="请选择小程序" v-model="alipayForm.mini_id" @change="changeMini">
              <a-select-option :value="item.id" v-for="item of idList" :key="item.id">
                {{ item.app_name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <template v-if="alipayForm.mini_id">
            <a-form-model-item label="图片logo" prop="delivery_image">
              <cyyUploadImg
                @uploadSuccess="e => choosePic(e, 'delivery_image')"
                @deleteImg="alipayForm.delivery_image = ''"
                :imgSrc="alipayForm.delivery_image"
                :showSize="false"
              >
              </cyyUploadImg>
              <div class="ts">尺寸600*600-支持格式：PNG、JPG、JPEG，大小不超过 200k</div>
            </a-form-model-item>

            <a-form-model-item label="活动名称" prop="delivery_name">
              <a-input v-model="alipayForm.delivery_name" placeholder="请填写名称" allowClear />
            </a-form-model-item>

            <a-form-model-item label="商家券活动" prop="activity_id">
              <a-select placeholder="请选择商家券活动" v-model="alipayForm.activity_id">
                <a-select-option :value="item.id" v-for="item of couponList" :key="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item label="类型" prop="type">
              <a-radio-group v-model="alipayForm.type">
                <a-radio :value="0">支付有礼</a-radio>
                <a-radio :value="1">满额送</a-radio>
              </a-radio-group>
            </a-form-model-item>

            <a-form-model-item v-if="alipayForm.type === 1" label="满额门槛" prop="delivery_floor_amount">
              <a-input-number
                placeholder="请输入"
                :min="0"
                :max="99999"
                :precision="2"
                v-model="alipayForm.delivery_floor_amount"
              />
            </a-form-model-item>

            <a-form-model-item label="发放时间" prop="delivery_begin_time">
              <a-range-picker
                allowClear
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :placeholder="['开始时间', '结束时间']"
                v-model="queryTime"
                @change="changeTime"
              />
            </a-form-model-item>
          </template>

          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button v-loading="btnLoading" type="primary" @click="onSubmit"> 提交 </a-button>
            <a-button style="margin-left: 10px" @click="$router.go(-1)"> 取消 </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </page-header-wrapper>
  </div>
</template>

<script>
import { createMarketingDelivery, activityDelivery2 } from '@/api/marketing/alipayPromotion'
import { cyyUploadImg } from '@/components/CyyUi/index'
import { alipayList } from '@/api/setting/applet'

export default {
  components: {
    cyyUploadImg
  },

  data() {
    return {
      serviceList: [],
      btnLoading: false,
      idList: [],
      materialList: [],
      queryTime: [],
      couponList: [],

      alipayForm: {
        delivery_name: '',
        mini_id: '',
        activity_id: '',
        delivery_begin_time: '',
        delivery_end_time: '',
        delivery_booth_code: 2,
        type: 0,
        delivery_floor_amount: '',
        delivery_image: ''
      },

      alipayRules: {
        mini_id: [{ required: true, message: '请选择小程序', trigger: 'change' }],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
        activity_id: [{ required: true, message: '请选择商家券活动', trigger: 'change' }],
        delivery_image: [{ required: true, message: '请上传LOGO', trigger: 'change' }],
        delivery_floor_amount: [{ required: true, message: '请选择商家券活动', trigger: 'blur' }],
        delivery_name: [{ required: true, message: '请选择活动名称', trigger: 'blur' }],
        delivery_begin_time: [{ required: true, message: '请选择券发放时间', trigger: 'change' }]
      }
    }
  },

  methods: {
    choosePic(e, item) {
      this.alipayForm[item] = e.data
    },

    changeMini() {
      activityDelivery2({
        mini_id: this.alipayForm.mini_id
      }).then(res => {
        this.couponList = res.data.coupon
      })
    },

    // 切换筛选时间
    changeTime(e) {
      if (e.length) {
        this.alipayForm.delivery_begin_time = e[0]
        this.alipayForm.delivery_end_time = e[1]
      } else {
        this.alipayForm.delivery_begin_time = ''
        this.alipayForm.delivery_end_time = ''
      }
    },

    // 点击提交
    onSubmit() {
      this.$refs.alipayForm.validate(async valid => {
        if (valid) {
          let alipayForm = JSON.parse(JSON.stringify(this.alipayForm)),
            data = {
              mini_id: alipayForm.mini_id,
              params_data: {
                ...alipayForm
              }
            }

          delete data.params_data.mini_id

          this.btnLoading = true
          const res = await createMarketingDelivery(data)
          this.btnLoading = false

          if (!res.code) {
            this.$message.success(res.msg)
            this.$router.back()
            return
          }

          this.$message.error(res.msg)
        } else {
          return false
        }
      })
    }
  },

  async mounted() {
    const hide = this.$message.loading('请稍等', 0)
    let res = await alipayList()
    if (!res.code && res.data.length) {
      this.idList = res.data
    }

    console.log('小程序id', this.$route.query)

    hide()
  }
}
</script>

<style lang="less" scoped>
.flexBox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  &:last-of-type {
    margin-bottom: 0;
  }

  .inp {
    flex: 1;
  }

  .btn {
    margin-left: 10px;
  }
}
</style>
